<template>
  <div class="home_div">
    <div id="container"></div>
  </div>
</template>
<script>
window._AMapSecurityConfig = {
  securityJsCode: "c72eb491316194249e05b5464d7ae459",
};
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "Mapview",
  data() {
    return {
      map: null,
      footLists:[
        {position:[116.40, 39.90],title: "北京",},
        {position:[112.55, 28.27],title: "宁乡",},
        {position:[112.52, 27.91],title: "韶山",},
        {position:[112.93, 28.25],title: "长沙",},
        {position:[113.14, 27.85],title: "株洲",},
        {position:[112.93, 27.85],title: "湘潭",},
        {position:[111.45, 27.24],title: "邵阳",},
        {position:[110.63, 26.74],title: "武冈",},
        {position:[112.57, 26.90],title: "衡阳",},
        {position:[111.99, 27.71],title: "娄底",},
        {position:[103.83, 36.07],title: "兰州",},
        {position:[104.61, 34.98],title: "陇西",},
        {position:[123.46, 41.80],title: "沈阳",},
        {position:[106.46, 26.58],title: "清镇",},
        {position:[110.17, 25.25],title: "桂林",},
        {position:[121.48, 31.40],title: "上海",},
        {position:[113.87, 27.61],title: "萍乡",},
        {position:[114.41, 23.12],title: "惠州",},
        {position:[114.70, 23.75],title: "河源",},
        {position:[113.75, 23.02],title: "东莞",},
        {position:[114.05, 22.55],title: "深圳",}
      ]
    };
  },
  created() {},
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "90f251191974e24af8dceedf4e6d5965", //设置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "2D",
            zoom: 5,
            zooms: [2, 22],
            mapStyle: "amap://styles/93e8556e8a8023daff830b381210ca49",
            center: [105.602725, 37.076636],
          });
          this.footLists.forEach((item)=>{
            this.map.add(new AMap.Marker(item));
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style  scoped>
.home_div {
  height: 85vh;
  width: 82vw;
  position: relative;
  min-width: 312px;
  min-height: 613px;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>